<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100">
    <h1 class="text-4xl font-bold text-blue-600 mb-4">欢迎使用 Nuxt 3.10 + Vue 3!</h1>
    <p class="text-lg text-gray-700 mb-8">这是一个基于 Nuxt 3.10 和 Vue 3 的示例项目</p>
      <div>
    <p>Name: {{ userStore.name }}</p>
    <p>Age: {{ userStore.age }}</p>
    <button @click="userStore.incrementAge()">Increment Age</button>
  </div>
  <!-- {{ todoList }} -->


  <div v-if="todoObj">
    <h2 class="text-2xl font-bold text-blue-500 mt-8">待办事项列表</h2>
   
    <div class="list-disc pl-5" v-for="(value, key, index) in todoObj" :key="key">
      <!-- {{ index }}.  -->
      {{ key }} {{ value }}
    </div>
  </div>

    <div v-if="todoList2.length">
    <h2 class="text-2xl font-bold text-blue-500 mt-8">待办事项列表222</h2>
    <ul class="list-disc pl-5">
      <li v-for="todo in todoList2" :key="todo.id">{{ todo.title }}</li>
    </ul>
  </div>


    <!-- <HelloWorld title="Nuxt 3 示例组件" description="这个组件展示了如何在 Nuxt 3 中使用 Vue 3 组件" /> -->
  </div>
  <nuxt-link to="/about">about</nuxt-link>
   <el-button type="primary" @click="ElMessage.success('安装成功')">
    测试按钮
  </el-button>

</template>


<style>
  /* :root {
  --el-color-primary: #27ba9b;
  --el-color-primary-light-3: #3cc7a7;
  --el-color-primary-dark-2: #1da58a;
} */
</style>

<script setup>
import {  onMounted, ref } from 'vue'
import { useNuxtApp } from 'nuxt/app';
import { useUserStore } from '~/stores/user'
const userStore = useUserStore()
// const todoObj = ref({})
// const todoList2 = ref([])
 console.log('jieguo000'); // 处理获取的数据

 const { axios } = useNuxtApp(); // 获取Axios 实例
   console.log(axios,'axios '); // 处理获取的数据
    const fetchData = async () => {
      try {
        const data = await axios.get('/todos/1'); // 使用拦截器处理请求和响应
        console.log(data,'jieguo '); // 处理获取的数据
        // todoObj.value = data; // 将获取的数据赋值给 todoList
      } catch (error) {
        console.error(error); // 处理错误情况
      }
    };
     const fetchData2 = async () => {
      try {
        const data = await axios.get('/todos'); // 使用拦截器处理请求和响应
        console.log(data,'jieguo '); // 处理获取的数据
        // todoList2.value = data; // 将获取的数据赋值给 todoList
      } catch (error) {
        console.error(error); // 处理错误情况
      }
    };
    onMounted(() => {
      fetchData();
      fetchData2();
    });
    const { data: todoList2, error: error2, pending: pending2 } = useAsyncData('todoList2', fetchData2)
    const { data: todoObj, error: error1, pending: pending1 } = useAsyncData('todoObj', fetchData)

  


</script>